<template>
    <div class="stock-can" ref="stockBox"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, computed, reactive, useContext, watch } from 'vue'
import axios from '../api'
import { useStore } from 'vuex'
import { stockCenterArr, stockColorArr } from '../config'
import WebSocketSerivce from '../utils/socket_service'
declare const echarts
export default defineComponent({
    name: 'stock',
    setup() {
      const store = useStore()
      let stockChart
      const stockBox = ref<HTMLElement>(null)
      const state = reactive({
        data: [],
        currentIndex: 0,
        timerId: 1
      })
       watch(() => store.state.theme, theme => {
        stockChart.dispose()  // 销毁原来的图表
        initChart()
        screenAdapter()
        updateChart()
      })
      // 初始化图表
      const initChart = () => {
        stockChart = echarts.init(stockBox.value, store.state.theme)
        const initOption = {
          title: {
            text: '▎ 库存统计',
            left: 20,
            top: 20
          }, 
        }
        stockChart.setOption(initOption)
      }
      // 获取数据
      const getData = res => {
        //const { data  } =  await axios.get('stock')
        state.data = res
        updateChart()
      }
      // 更新图表
      const updateChart = () => {
        const seriesData = state.data.slice(state.currentIndex * 5, (state.currentIndex + 1) * 5).map((item, index) => {
          return {
            type: 'pie',
            center: stockCenterArr[index],
            hoverAnimation: false, // 去除动画
            labelLine: {
              show: false
            },
            label: {
              show: true,
              position: 'center',
              color: stockColorArr[index][0]
            },
            data: [
              {
                name: item.name + '\n\n' + item.sales,
                value: item.sales,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: stockColorArr[index][0]
                    },
                    {
                      offset: 1,
                      color: stockColorArr[index][1]
                    }
                  ])
                }
              },
              {
                value: item.stock,
                itemStyle: {
                  color: '#333'
                }

              }
            ]
          }
        })
        const updateChart = {
          series: seriesData
        }
        stockChart.setOption(updateChart)   
        
      }
      // 适配
      const screenAdapter = () => {
        const titleFontSize = stockBox.value.offsetWidth / 100 * 3.6
        const innerRadius = titleFontSize * 2.5
        const outterRadius = innerRadius * 1.3
        const seriesArr = []
        for (let i = 0; i < 5; i++) {
          seriesArr.push({
              type: 'pie',
              radius: [ outterRadius, innerRadius],
              label: {
                fontSize: titleFontSize / 2
              }
            }) 
        }
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize
            }
          },
          series: seriesArr  
        }
        stockChart.setOption(adapterOption)
        stockChart.resize()
      }
      // 定时
      const setIntervalFn = () => {
        state.timerId = setInterval(() => {
          state.currentIndex += 1
          if(state.currentIndex > 1) {
            state.currentIndex = 0
          }
          updateChart()
        }, 3000)
      }

      const { expose } = useContext()
      expose({
        screenAdapter
      })
      onMounted(async () => {
        WebSocketSerivce.instance.registerCallBack('stockData', getData)
        initChart()
        // await getData()
        WebSocketSerivce.instance.send({
          action: 'getData',
          socketType: 'stockData',
          chartName: 'stock',
          value: false
        })
        window.addEventListener('resize', screenAdapter)
        screenAdapter()
        setIntervalFn()   
      
      })

      onUnmounted(() => {
        WebSocketSerivce.instance.unRegisterCallBack('stockData')
        clearInterval(state.timerId)
        window.removeEventListener('resize', screenAdapter)
      })

      return {
        stockBox
      }
    }
})
</script>
<style lang="less" scoped>
.stock-can {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  
}
</style>
